<template>
    <div>
        <div v-show="detailsList.processKey == 'process_leave'">
            <div style="margin-bottom: 20px;">
                请假申请
            </div>
            <div
                style="display: flex;justify-content: space-between;width: 40%;line-height: 30px;font-size: 14px;margin-left: 5px">
                <div class="left">
                    <div>审批类型：{{ detailsList.processName }}</div>
                    <div>休假类别：{{ }}</div>
                    <div>请假时长：{{ detailsList.duration }}</div>
                    <div>申请事由：{{ detailsList.reason }}</div>
                </div>
                <div class="right">
                    <div>开始时间：{{ detailsList.startTime }}</div>
                    <div>结束时间：{{ detailsList.endTime }}</div>
                    <div>申请单位：{{ detailsList.applyUnit }}</div>
                    <div>审批状态：{{ processState == 1 ? '审批中' :
                        processState == 2 ? '审批通过' : processState == 3 ? '审批不通过' : '撤销' }}</div>
                </div>
            </div>
        </div>
        <div v-show="detailsList.processKey == 'process_overtime'">
            <div style="margin-bottom: 20px;">
                加班申请
            </div>
            <div
                style="display: flex;justify-content: space-between;width: 45%;line-height: 30px;font-size: 14px;margin-left: 5px">
                <div class="left">
                    <div>补偿方式：{{ detailsList.compensation }}</div>
                    <div>加班结束时间：{{ detailsList.end_time }}</div>
                </div>
                <div class="right">
                    <div>加班开始时间：{{ detailsList.start_time }}</div>
                    <div>申请原因：{{ detailsList.reason }}</div>
                </div>
            </div>
        </div>
        <div v-show="detailsList.processKey == 'process_dimission'">
            <div style="margin-bottom: 20px;">
                离职申请
            </div>

            <div
                style="display: flex;justify-content: space-between;width: 40%;line-height: 30px;font-size: 14px;margin-left: 5px">
                <div class="left">
                    <div>申请类型：{{ detailsList.processName }}</div>
                    <div>离职原因：{{ detailsList.reason }}</div>
                </div>
                <div class="right">
                    <div>期望离职时间：{{ detailsList.exceptTime }}</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
let y = defineProps(['detailsList', 'processState'])

</script>

<style scoped></style>